<template>
  <div id="app">
  	<Theader></Theader>
  	<transition :name="transitionName" >
    		<router-view />
    </transition>
    <navbar></navbar>
  </div>
</template>

<script>
import Theader from '../src/components/header.vue'
import navbar from '../src/components/navbar.vue'
export default {
  name: 'app',
  components: {
    Theader,navbar
  },
  data(){
  	return{
  		transitionName:''
  	}
  },
  watch:{//watch监听$router变化
  	$route(to,from){
      console.log(to)
      console.log(from)
  		//to index如果大于from index，判断为前进状态，反之则是后退
  		if(to.meta.index>from.meta.index){
  			this.transitionName='slide-left'
  		}else if(to.meta.index<from.meta.index){
  			this.transitionName='slide-right'
  		}
  	}
  }
}
</script>

<style lang="stylus" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}


#app
  width:100%
  height:100%


</style>
